<template>
  <el-card
    class="card"
    :body-style="{ padding: '10px', border: 'none'}"
    shadow="hover"
    @click="this.$router.push({ path: '/commodity/', query: {id: commodityId}})"
  >
    <div style="display: flex; justify-content: center">
      <el-image
        :src="url"
        class="pic"
      >
        <template #placeholder>
          <div class="image-slot">Loading<span class="dot">...</span></div>
        </template>
      </el-image>
    </div>

    <div style="font-weight: 900; color: #e60012; margin: 5px 0">
      <span>￥{{ price }}</span>
    </div>
    <div class="content">
      {{ name }}
    </div>
    <div
      style="margin-top: 10px;"
      @click.stop="doShoppingCartAdd"
    >
      <el-text class="text">
        <el-icon>
          <ShoppingCart />
        </el-icon>
        加入购物车
      </el-text>
    </div>
  </el-card>
</template>
  
  <script>
import { shoppingCartAdd } from "@/api/shoppingCart";
import { ElMessage } from "element-plus";
export default {
  props: {
    url: String,
    price: String,
    name: String,
    commodityId: Number,
  },
  methods: {
    doShoppingCartAdd() {
      shoppingCartAdd(this.commodityId, this.number).then((res) => {
        ElMessage({
          message: "加入购物车成功",
          type: "success",
        });
      });
    },
  },
};
</script>
  
  <style scoped>
.card {
  cursor: pointer;
  --el-border-color-light: #fff;
}

.content {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.pic {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

.text {
  border: 1px solid #dddddd;
  font-size: 10px;
  padding: 2px;
}

.text:hover {
  border: 1px solid #3271ae;
  color: #3271ae;
}
</style>